<template>
  <div class="hello">
    <div>{{count}}</div>
    <div>{{doubleCount}}</div>
    <div>{{doneTodos}}</div>
    <div>{{doneTodosCount}}</div>
    <div>{{getTodoById}}</div>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations ,mapActions} from 'vuex'
export default {
  name: 'HelloWorld',
  computed:{
    ...mapState({
       count: state => state.count,
    }),
    ...mapGetters(['doneTodos','doneTodosCount','doubleCount']),
    getTodoById(){
      return this.$store.getters.getTodoById(2);
    },
  },
  mounted(){
    //  this.increment({ amount: 10 })
    // this.$store.dispatch({
    //   type: 'incrementAsync',
    //   amount: 10
    // })
    //  this.incrementAsync({ amount: 30 })
    this.incrementAsync({amount:10}).then(res=>{
      console.log(res);
    })
  },
  methods:{
    ...mapMutations([
      'increment'   
     ]),
     ...mapActions([
       'incrementAsync'
     ])
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
